import React from 'react';
import '../css/InputBox.css';
import {PENDDING} from './config';

class InputBox extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div className="input-box-container">
                <div className="input-left">ToDoList</div>
                <div>
                    <input ref="todoInput" placeholder="添加ToDo" />
                </div>
                <div>
                    <button onClick={()=>{
                        // 获取输入框的value
                        var value = this.refs.todoInput.value;
                        // 容错判断
                        if(value.length === 0){
                            alert("添加的内容不能为空");
                            return;
                        }

                        // 组装todo对象
                        var todo = {
                            content:value,
                            status:PENDDING   // 未经定义 的魔法值
                        }
                        this.props.addTodo(todo)
                    }}>添加todo</button>
                </div>
            </div>
        );
    }
}

export default InputBox;